<template>
  <transition name="fadeScale">
    <div class="seeAdvice" v-show="ifSee">
      <div class="message" :style="{ backgroundColor: color }">
        <div class="O"></div>
        <div class="X" @click="endSeeAdvice">
          <i class="iconfont iconcuowu"></i>
        </div>
        <p v-if="!writeAdvice">{{ username }}</p>
        <p v-if="writeAdvice">{{ Myusername }}</p>
        <span v-if="!writeAdvice">{{ content }}</span>
        <div v-if="writeAdvice">
          <textarea
            cols="30"
            rows="10"
            v-model="adviceContent"
            placeholder="分享给所有人..."
          ></textarea>
          <button @click="addAdvice">添加</button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script setup lang="ts">
import Bus from "../../bus";
import Tip from "@/components/confirm/tip";
import Message from "@/components/msg/msg";
import {
  ref,
  onMounted,
  computed,
  onBeforeUnmount,
  defineEmits,
  defineExpose,
} from "vue";
import { useStore } from "vuex";
import { seeAdvice } from "@/type/advice";
import $axios from "@/http";
const $store = useStore();
onMounted(() => {
  Bus.$on("startSeeAdvice", (msg: seeAdvice) => {
    color.value = msg.color;
    content.value = msg.advice;
    ifSee.value = true;
    username.value = msg.username;
  });
});
const $emit = defineEmits(["competeAdvice"]);
onBeforeUnmount(() => Bus.$off("startSeeAdvice"));

const ifSee = ref<boolean>(false);
const color = ref<string>("");
const content = ref<string>("出BUG了");
const writeAdvice = ref<boolean>(false);
const adviceContent = ref<string>("");
const username = ref<string>("");
defineExpose({
  color,
  writeAdvice,
  ifSee,
});
const Myusername = computed(() => $store.getters.user.username);
const endSeeAdvice = () => {
  ifSee.value = false;
};
const addAdvice = () => {
  Tip("你确定要添加此留言吗？", config);
};
const config = () => {
  if (adviceContent.value.trim()) {
    $axios
      .post("/advice/add", {
        username: $store.getters.user.username,
        content: adviceContent.value,
      })
      .then((res) => {
        if (res.data.error === -1) {
          $emit("competeAdvice");
          Message.success("添加成功");
          adviceContent.value = "";
          endSeeAdvice();
        } else {
          Message.error("添加失败");
        }
      });
  } else {
  }
};
</script>

<style lang="scss" scoped>
@import "../../css/comment/animate.css";
.seeAdvice {
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100vh;
  left: 0;
  z-index: 9;
  background-color: rgba(0, 0, 0, 0.5);
  .message {
    position: relative;
    margin: 100px auto 0;
    width: 70%;
    height: 70%;
    overflow: hidden;
    padding: 50px;
    .O {
      position: absolute;
      width: 20px;
      height: 20px;
      border-radius: 20px;
      background-color: #fff;
      top: 15px;
      left: 20px;
    }
    .X {
      position: absolute;
      width: 20px;
      height: 20px;
      top: 15px;
      right: 20px;
      z-index: 99;
      font-size: 20px;
      transition: all 0.4s;
      &:hover {
        transform: scale(1.3);
      }
    }
    p {
      padding: 40px 50px;
      font-size: 25px;
      font-weight: 100;
      transition: all 0.4s;
      &:hover {
        transform: scale(1.1);
        color: #fff;
      }
    }
    textarea {
      border-radius: 10px;
      box-sizing: border-box;
      font-size: 15px;
      resize: none;
      width: 100%;
      height: 350px;
      font-size: 18px;
      padding: 17px 20px;
    }
    button {
      outline: none;
      border: 1px solid #333;
      width: 90px;
      height: 30px;
      border-radius: 15px;
      transition: all 0.4s;
      margin-top: 15px;
      cursor: url("../../assets/img/cur/mais.png"), default;

      &:hover {
        background-color: black;
        color: blanchedalmond;
      }
    }
    span {
      color: black;
      padding: 50px;
      font-size: 18px;
      letter-spacing: 1px;
    }
  }
}
</style>
